<template>
  <view class="loading-container" :class="{ 'loading-fullscreen': fullscreen }">
    <view class="loading-content">
      <u-loading-icon 
        :size="size" 
        :color="color" 
        :mode="mode"
      />
      <text v-if="text" class="loading-text">{{ text }}</text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  text: {
    type: String,
    default: '加载中...'
  },
  size: {
    type: [String, Number],
    default: 40
  },
  color: {
    type: String,
    default: '#ff6b81'
  },
  mode: {
    type: String,
    default: 'semicircle'
  },
  fullscreen: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="scss" scoped>
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
  
  &.loading-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}
  
  .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
     margin-right: 20rpx; &:last-child { margin-right: 0; }
    
    .loading-text {
      font-size: 28rpx;
      color: #666;
}
  }
}
</style>